import React, { Component } from 'react'
import { HomeApi } from "../request/api"
import { connect } from 'react-redux'
import { Link } from "react-router-dom"
import books from '../images/home/books.png'
import examination from '../images/home/examination.png'
import practice from '../images/home/practice.png'
import subject from '../images/home/subject.png'
import './less/Home.less'

import { withStyles } from '@material-ui/core/styles';
import LinearProgress from '@material-ui/core/LinearProgress';

const BorderLinearProgress = withStyles((theme) => ({
  root: {
    height: 10,
    borderRadius: 5,
  },
  colorPrimary: {
    backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
  },
  bar: {
    borderRadius: 5,
    backgroundColor: '#2E57FF',
  },
}))(LinearProgress);


class Home extends Component {
  state = {
    collect: 0,
    exam: {},
    exemItems: [],
    study: 0,
    wrong: 0,
    progress:100

  }
  componentDidMount() {
    let token = localStorage.getItem("x-auth-token")
    if (token) {
      HomeApi().then(res => {
        console.log(res);
        if (res.errCode === 0) {
          let { collect, exam, exemItems, study, wrong } = res.data
          this.setState({ collect, exam, exemItems, study, wrong })
        }
      })
    } else {
      // 显示loading
      this.props.showLoadingFn()
      // 跳转登录页
      setTimeout(() => {
        // 跳转登录页
        this.props.hideLoadingFn()
        this.props.history.push('/login')
      })

    }
  }
  render() {

    return (
      <div className="home">
        <div className="top">
          <h2>JAVA学科</h2>
          <Link to={{pathname:'/toggle',state:{exemItems:this.state.exemItems}}}>
          <span>切换考试科目</span>  <i className='iconfont icon-xiangyou'></i>
          </Link>
        </div>
        <div className="banner">
          <div className="welocme">欢迎Tomato来到XX学习库！</div>
          <div className="right">
            <div className="right_l">
              <h3>已学0题</h3>
              <div className="score">0</div>
              <span>错题</span>
            </div>
            <div className="right_l right_r">
              <h3>共3题</h3>
              <div className="score">0</div>
              <span>收藏</span>
            </div>
          </div>
        </div>
        <div className="ad">
          <img src={books} alt="" />
          <img src={examination} alt="" />
          <img src={practice} alt="" />
        </div>
        <div className="title">
          <h3>学科题库</h3>
          <span>坚持每一天，成长看得见</span>
        </div>
        <ul className="list">
          {
            this.state.exemItems.map(item => (
              <li key={item.id}>
                <img src={subject} alt="" />
                <section>
                  <h3>{item.title}</h3>
                  <main>{item.itemCount}/ {item.itemCount}</main>
                  <BorderLinearProgress variant="determinate" value={this.state.progress} />

                </section>
                <div className="btn" onClick={() => this.props.history.push(`/practice/${item.actionCode}`)}>练习</div>
              </li>
            ))
          }
        </ul>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    showLoadingFn() {
      dispatch({ type: "showLoadingFn" })
    },
    hideLoadingFn() {
      dispatch({ type: "hideLoadingFn" })
    }
  }
}

export default connect(null, mapDispatchToProps)(Home)